<template>
  <div class="btn_box">
    <img class="btn_bg" src="https://big-file.oss-cn-hangzhou-zwynet-d01-a.internet.cloud.zj.gov.cn/img/2021/202105/20210521/1621586402751.png" alt="">
    <ul class="btn_ul">
      <li @click="onClickBtn(index,i.name)" v-for="(i,index) in list" :key="index" :class="[nowBtn===index?'btn_show':'']">
        <img :src="i.img" alt="">
        {{ i.name }}
      </li>
    </ul>
    <ul class="btn_ul btn_ul_ul" v-show="isShowChilren">
      <li v-for="(c,cindex) in chilren" :key="cindex" @click="onClickBtn('0.'+(cindex+1),c)"  :class="[nowBtn==='0.'+(cindex+1)?'btn_show':'']">{{c}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name:"Btn",
  data(){
    return{
      list:[
        {name:'文化元素总数',img:'https://big-file.oss-cn-hangzhou-zwynet-d01-a.internet.cloud.zj.gov.cn/img/2021/202105/20210521/1621586525326.png'},
        {name:'重点元素清单',img:'https://big-file.oss-cn-hangzhou-zwynet-d01-a.internet.cloud.zj.gov.cn/img/2021/202105/20210521/1621586602178.png'},
        {name:'解码完成数',img:'https://big-file.oss-cn-hangzhou-zwynet-d01-a.internet.cloud.zj.gov.cn/img/2021/202105/20210521/1621586615625.png'}
      ],
      city:this.$city.city,
      chilren:['中国优秀传统文化','革命文化','社会主义先进文化'],
      nowBtn:0,
      mapList:[]
    } 
  },
  created(){
    this.getMapList(0,'文化元素总数');
  },
  methods:{
    onClickBtn(index,name){
      this.nowBtn = index;
      if( this.isChilren || index===0){
        this.getMapList(index,name);
      }else{
        let list = [];
        this.mapList.forEach(i=>{
          list.push({value:i[index===0?'allCount':index===1?'impCount':'overCount'],name:this.city[this.cityKey(i['areaCode'])],type:index})
        })
        this.$emit('changeMapList',[list,name])
      }
    },
    getMapList(index,name){
      let CECode = index==0.1?'A':index==0.2?'B':index==0.3?'C':''
      this.$api.getCE({
        "CECode": CECode
      }).then(res=>{
        if(res.data.code != 0) return
        this.mapList = res.data.data;
        let list = [];
        res.data.data.forEach(i=>{
          list.push({value:i['allCount'],name:this.city[this.cityKey(i['areaCode'])],type:index});
        })
        this.$emit('changeMapList',[list,name])
      })
    }
  },
  computed:{
    isShowChilren(){
      return this.nowBtn < 1 ? true : false
    },
    isChilren(){
      return String(this.nowBtn).indexOf('.')+1
    },
    cityKey(){
      return function(areaCode){
        return areaCode - 3301
      }
    }
  }
}
</script>

<style>
.btn_box{
  position: relative;
  height: 76px;
}
.btn_bg{
  position: absolute;
  top: 0;
}
.btn_ul{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  width: 500px;
}
.btn_ul_ul{
  width: 420px;
  transform: translate(-90%,100%) scale(.8);
  z-index: 999;
}
.btn_ul>li{
  height: 38px;
  border-radius: 7px;
  background-image: linear-gradient(to left top,#194483,#229bd2);
  line-height: 38px;
  padding: 0 15px;
  color: #fff;
  font-size: 15px;
  white-space: nowrap;
  box-sizing: content-box;
}
.btn_ul>li:hover{
  cursor: pointer;
  border: 3px solid #fff;
  margin: -3px;
  box-shadow: 0 0 50px rgba(74, 123, 211, .8);
}
.btn_show{
  border: 3px solid #fff;
  margin: -3px;
  box-shadow: 0 0 50px rgba(74, 123, 211, .8);
}
.btn_ul>li>img{
  transform: translateY(20%);
}
</style>